<script type="text/javascript"><!--//--><![CDATA[//><!--

	var grid_reload = function(){
		$('#datagrid').datagrid('reload', $('#fm_search').serializeObject());
	};
	$(document).ready(function() {
		// Setup Datagrid
		$('#datagrid').datagrid({  
			url:gs_path+'/'+controller+'/getdata', 
			queryParams: $('#fm_search').serializeObject(),
			height:340,
			pagination:true,
			columns:[[
				{ field : 'ck', checkbox:true, width: 40, align: 'center' },
				{ field : 'mdstruktur_path', title : 'Kode MD', width : 100, sortable:true },
				{ field : 'mdstruktur_nama', title : 'Nama MD', width : 250, formatter: MdstrukturNama, sortable:true },
				//{ field : 'mdstruktur_pid', title : 'PID Mdstruktur', width : 100, sortable:true },
				{ field : 'mdstruktur_margin', title : 'Margin', width : 150, align:'right',sortable:true, editor:{type:'numberbox',options:{precision:2}}},
				{ field : 'mdstruktur_type', title : 'Type', width : 100, sortable:true },
				//{ field : 'mdstruktur_path', title : 'Path Mdstruktur', width : 250, sortable:true }
			]]
		});
		
		$('#filter_app_id').setCombo({ data: <?php echo json_encode($arr_application); ?> });
		
		// Setup Form
		$('#form_master').setupForm([
			

			{ name: 'mdstruktur_pid', type: 'lov', data: <?php echo json_encode($comboinduk); ?>, size: 'medium',
				onClearButton:function(){
					$(this).setval(''); 
					$('#mdstruktur_type').setval(''); 
				},
				onActionButton:function(){ 
					LOVVendor({ onSelect:function(row){ 
						$('#mdstruktur_pid').setval(row.kd_vendor); 
						$('#mdstruktur_type').setval(row.nama_vendor);
					} }); 
				}
			}, 
			{ name: 'mdstruktur_kode', type: 'text', size: 'short', maxlength: 250, noempty:true },
			{ name: 'mdstruktur_nama', type: 'text', size: 'long', maxlength: 250, noempty:true },
			//{ name: 'mdstruktur_pid', type: 'text', size: 'long', maxlength: 250 },
			//{ name: 'mdstruktur_type', data: <?php echo json_encode($arr_type_1); ?>, size: 'medium', noempty:true },
			//{ name: 'mdstruktur_type_2', data: <?php echo json_encode($arr_type_2); ?>, size: 'medium', noempty:true },
			//{ name: 'mdstruktur_type_3', data: <?php echo json_encode($arr_type_3); ?>, size: 'medium', noempty:true },
			//{ name: 'mdstruktur_type', type: 'text', size: 'short', maxlength: 250 },
			{ name: 'mdstruktur_margin', type: 'text', size: 'short', maxlength: 250 },
			//{ name: 'mdstruktur_path', type: 'text', size: 'long', maxlength: 250, noempty:true }
		]);

		// Create Dialog
		$('#dialog_container').dialog({
			closed:true,
			modal:true,
			title: '_',
			width:600,
			buttons:[{
				text:'Save',
				iconCls:'icon-save',
				handler:function(){
					$('#form_master').submitForm('/'+controller+'/ajax_post', { onComplete : function(){ $('#dialog_container').dialog('close'); $('#datagrid').datagrid('reload'); }} );					
				}
			},{
				text:'Close',
				iconCls:'icon-cancel',
				handler:function(){
					$('#dialog_container').dialog('close');
				}
			}]
		});
		
		//mdstruktur_id, mdstruktur_pid, mdstruktur_kode, mdstruktur_nama, mdstruktur_type, mdstruktur_margin, mdstruktur_path
		// Set Action Button
		var buttons = [ { label: 'Add', icon: 'add', onclick: function() {
							resetError();
							$('#dialog_container').dialog('open');
							$('#form_master').data('mode', 'create');
							$('#form_master').parent().parent().parent().prev().find('.panel-title').html('New Mdstruktur');
							$('#mdstruktur_pid, #mdstruktur_kode, #mdstruktur_nama, #mdstruktur_type, #mdstruktur_margin').val('');
							$('#mdstruktur_type').readonly(false);
							$('#mdstruktur_pid').readonly(false);
							$('#mdstruktur_kode').readonly(false);
							//$('#mdstruktur_nama').readonly(false);
							//$('#mdstruktur_pid').readonly(false);
							//$('#mdstruktur_margin').readonly(false);
							//$('#mdstruktur_path').readonly(false);
							$('#mdstruktur_kode').focus();
						} },
						{ label: 'Edit', icon: 'edit', onclick: function() {
							var oSel=$('#datagrid').datagrid('getSelected'); 
							if(oSel==null){ alert('Please select row!'); }
							else{ 
								resetError();
								$('#dialog_container').dialog('open'); 
								$('#form_master').data('mode', 'edit');
								$('#form_master').parent().parent().parent().prev().find('.panel-title').html('Edit Mdstruktur');
								$('#mdstruktur_kode').readonly();
								$('#mdstruktur_type').readonly();
								$('#mdstruktur_pid').readonly(true);
								jsonToForm(oSel); 
								$('#mdstruktur_nama').focus();
							} 
						} },
						{label: 'Delete', icon: 'delete', onclick: function() { 
							var oSel = $('#datagrid').datagrid('getSelected'); 
							if (oSel == null) { 
								$.messager.alert('&nbsp;', gs_msg_row_unselected, 'warning'); 
							} else { 
								deleteData(['mdstruktur_kode']);
							} 
						}}];
		setAction(buttons);
		
		
		$('#fm_search').focusFirst();

		//design

		function MdstrukturNama(val,row){
			if (row.mdstruktur_type == "DEP"){
				return '<span style="font-weight:bold; padding: 10px;">'+val+'</span>';
			}else if(row.mdstruktur_type == "DIV"){
				return '<span style="font-weight:bold;">'+val+'</span>';
			}else {
				return '<span style="padding: 20px;">'+val+'</span>';
			}
		}

	});
//--><!]]></script>

<div id="tb" style="padding:5px;height:auto">
    <div>
        <form id="fm_search" onsubmit="grid_reload(); return false;">
        	<table class="tb_form" style="margin-bottom:0px">

            <tr>
            	<td width="100">Keyword</td>
                <td><input type="text" id="keyword" name="keyword" class="textfield medium" />
                	<a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="grid_reload(); return false;">Search</a>
                </td>
            </tr>
            </table>
        </form>
    </div>
</div>

<div id="datagrid" toolbar="#tb">
</div>

<div id="dialog_container" style="padding:5px;width:600px;height:250px;">
	<form id="form_master">
    <table class="tb_form" style="width:100%;" cellpadding="0" cellspacing="0">    


    <tr>
        <td class="label">Induk MD Structure</td>
        <td><input id="mdstruktur_pid" name=""/></td>
    </tr>
    <tr>
        <td class="label">Type</td>
        <td><span id="mdstruktur_t"></span></td>
        <div id="mdstruktur_type">
        	
        </div>
	</tr>
    <tr>
        <td class="label">Kode MD</td>
        <td><input id="mdstruktur_kode" /></td>
    </tr>
    <tr>
        <td class="label">Nama MD</td>
        <td><input id="mdstruktur_nama" /></td>
    </tr>
    <tr>
        <td class="label">Margin</td>
        <td><input id="mdstruktur_margin" /></td>
    </tr>

    
    <!--<tr>
        <td class="label">PID Mdstruktur</td>
        <td><input id="mdstruktur_pid" /></td>
    </tr>-->

	<!--<tr>
	<td>
	<tr bgcolor="#c0c0c0">
        <td class="label">Parent (DIV)</td>
		<td><input id="mdstruktur_type" /></td>
    </tr>
	<tr bgcolor="#c0c0c0">
		<td class="label">Child (DEP)</td>
        <td><input id="mdstruktur_type_2" /></td>
	</tr>
	</td>
	</tr>-->
	
    <!--<tr>
        <td class="label">Path Mdstruktur</td>
        <td><input id="mdstruktur_path" /></td>
    </tr>-->
    </table>
	</form>  
    
</div>

<script type="text/javascript">
	$(document).ready(function(){

		var selectedValue = $("#mdstruktur_pid").val();
		 $.ajax({
	    	url: gs_path+'/'+controller+'/getType/',
	    	type: 'POST',
	    	dataType: 'json',
	    	data: {option : selectedValue},
	    }).done(function(data){ 
	    	cache: false
	    	console.log(data.md_type);
	    	$("#mdstruktur_t").html("");
	    	$("#mdstruktur_t").html(data.md_type);
	    	$("#mdstruktur_type").html('<input type="hidden" id="" name="mdstruktur_type" value="">');
	    	$("#mdstruktur_type").html('<input type="hidden" id="" name="mdstruktur_type" value="'+data.md_typ+'"><input type="hidden" id="" name="mdstruktur_path" value="'+data.md_path+'">');
	    });

	});

	$("#mdstruktur_pid").change(function() {
		var selectedValue = this.value;
	    //make the ajax call
	    $.ajax({
	    	url: gs_path+'/'+controller+'/getType/',
	    	type: 'POST',
	    	dataType: 'json',
	    	data: {option : selectedValue},
	    }).done(function(data){ 
	    	cache: false
	    	$("#mdstruktur_t").html("");
	    	$("#mdstruktur_t").html(data.md_type);
	    	$("#mdstruktur_type").html('<input type="hidden" id="" name="mdstruktur_type" value="">');
	    	$("#mdstruktur_type").html('<input type="hidden" id="" name="mdstruktur_type" value="'+data.md_type+'"><input type="hidden" id="" name="mdstruktur_path" value="'+data.md_path+'">');
	    });
	   
	});
</script>